import React, { Component } from 'react'
import style from "./mebuy.module.scss"
import {back_icon,certificate_icon} from '../../common/icon/svg'
import { request } from '../../serverAPI'
const img = require("../../common/image/me/椭圆 1.png")
export default class MeBuy extends Component {
    state={
        orderList:[],
        flag:false,
        msgList:[],
        money:["支付宝","微信支付","银联支付","钱包支付"],
        list:[
            {
                name:"全   部",
                children:[
                    {
                        did:"",
                        item:[
                            {
                                img:require("../../common/image/home/swiper01.jpg"),
                                name:"沉默的大多数",
                                msg:"明天会更好，明天会更好，明天会更好，明天会更好，明天会更好",
                                bid:"",
                                isdeal:true,
                                original_price:98,
                                price:78.4,
                                city:"北京 北京",
                                degree:6,
                                uid:"",
                            },
                            {
                                img:require("../../common/image/home/swiper01.jpg"),
                                name:"沉默的大多数",
                                msg:"明天会更好，明天会更好，明天会更好，明天会更好，明天会更好",
                                bid:"",
                                isdeal:true,
                                original_price:98,
                                price:78.4,
                                city:"北京 北京",
                                degree:6,
                                uid:"",
                            }
                        ]
                    },
                    {
                        did:"",
                        item:[
                            {
                                img:require("../../common/image/home/swiper02.jpg"),
                                name:"沉默的大多数",
                                msg:"明天会更好，明天会更好，明天会更好，明天会更好，明天会更好",
                                bid:"",
                                isdeal:true,
                                original_price:98,
                                price:78.4,
                                city:"北京 北京",
                                degree:6,
                                uid:"",
                            }
                        ]
                        
                    }
                ]
            },
            {
                name:"代付款",
                children:[]
            },
            {
                name:"已付款",
                children:[]
            }
        ],
        active:0
    }
    btn=(i)=>{
        if(i!==0){
            request({
                url:"/orders",
                method:"GET",
                params:{
                    paystatus:i-1
                }
            }).then(res=>{
                if(res.data.code=="01"){
                    this.setState({
                        active:i,
                        orderList:res.data.data
                    })
                }
                
            })
        }else{
            request({
                url:"/allOrderList",
                method:"GET",
            }).then(res=>{
                console.log(res);
                if(res.data.code==="01"){
                    this.setState({
                        active:i,
                        orderList:res.data.data
                    })
                }
            })
        }
    }
    componentDidMount(){
        request({
            url:"/allOrderList",
            method:"GET",
        }).then(res=>{
            console.log(res);
            if(res.data.code==="01"){
                this.setState({
                    orderList:res.data.data
                })
            }
        })
    }


//     buildtime: "2021-07-15T02:45:59.000Z"
// oid: "c90cc2b0-e516-11eb-8e26-b19bf4b19466"
// paystatus: 1
// paysum: 67
// paytime: null
// paytype: 1
// postage: 10
// rece_address: "安徽省,六安市,霍邱县政府大道1号"
// uid: "b865f060-dba4-11eb-913b-39a4f35f6a98"
getdate=(data)=>{
    var json_date = new Date(data).toJSON();
    var time=new Date(+new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    return time
}

msg=(oid)=>{
    request({
        url:"/getgoods",
        method:"GET",
        params:{
            oid
        }
    }).then(res=>{
        if(res.data.code==="01"){
            this.setState({
                flag:true,
                msgList:res.data.data
            })
        }
    })
}
tui=()=>{
    this.setState({
        flag:false
    })
}
    
    render() {
        return (
            <div className={style.buy}>
                <div className={style.head}>
                    <span onClick={()=>this.props.history.push("/me")}>{back_icon}</span>
                    <span className={style.shou}>我的买入</span>
                </div>
                <ul className={style.nav}>
                    {
                        this.state.list.map((item,i)=>{
                            return (
                                <li key={i} className={this.state.active===i?style.active:null} onClick={()=>this.btn(i)}>
                                    {item.name}
                                </li>
                            )
                        })
                    }
                </ul>
                {
                    this.state.orderList.length<=0?<div className={style.logo}>
                    <img src={img.default}></img>
                    <div className={style.kong}>空无一物~</div>
                </div>:<div className={style.content}>
                    {
                        this.state.orderList.map((item,i)=>{
                            return (
                                <div key={i} className={style["order-list"]}>
                                    <div>
                                        <span className={style.oid}>订单编号：{item.oid}</span>
                                    </div>
                                    <div className={style.address}>
                                        订单地址：{item["rece_address"]}
                                    </div>
                                    <div>
                                        <span className={style.paytype}>支付方式：{this.state.money[item.paytype]}</span>
                                        <span className={style.paysum}>总金额:￥{item.paysum}</span>
                                        <span className={style.paystatus}>{item.paystatus?"已支付":"未支付"}</span>
                                    </div>
                                    <div>
                                        <span className={style.time}>订单时间:{this.getdate(item.buildtime)}</span>
                                        <span className={style.msg} onClick={()=>this.msg(item.oid)}>查看详情</span>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                
                }
                <div className={style.ma}>
                    继续买书
                </div>
                {
                    this.state.flag?<div className={style.mark}>
                        <div className={style.max} onClick={this.tui}>

                        </div>
                        <div className={style.min}>
                                <span className={style["min-span"]} onClick={this.tui}>X</span>
                            {
                                this.state.msgList.map((ite,index)=>{
                                   
                                    return (
                                        <div key={index} className={style["buy-item"]}>
                                        <img src={'/apis/'+ite.cover}></img>
                                        <div className={style["buy-msg"]}>
                                            <div className={style["buy-top"]}>
                                                <span className={style["buy-name"]}>{ite.name}</span>
                                                {
                                                    ite.isdeal?<span className={style["buy-succes"]}>交易成功</span>:null
                                                }
                                            </div>
                                            <p>{ite.description}</p>
                                            <div className={style["buy-footer"]}>
                                                <div>
                                                    <span className={style["buy-min"]}>￥</span>
                                                    <span className={style["buy-new"]}>{ite.price}</span>
                                                    
                                                </div>
                                                <span className={style["buy-count"]}>X{ite.count}</span>
                                            </div>
                                        </div>
                                    </div>
                                    )
                                })
                            }
                        </div>
                    </div>:null
                }
            </div>
        )
    }
}
